<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">
	
	<!-- col -->
	<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
		<h1 class="page-title txt-color-blueDark">
			
			<!-- PAGE HEADER -->
			<i class="fa-fw fa fa-home"></i> 
				E-commerce
			<span>>  
				Products View
			</span>
		</h1>
	</div>
	<!-- end col -->
	
	<!-- right side of the page with the sparkline graphs -->
	<!-- col -->
	<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8 text-right">
		
		<a href="javascript:void(0);" class="btn btn-default shop-btn">
			<i class="fa fa-3x fa-shopping-cart"></i>
			<span class="air air-top-right label-danger txt-color-white padding-5">10</span>
		</a>
		<a href="javascript:void(0);" class="btn btn-default">
			<i class="fa fa-3x fa-print"></i>
		</a>
		
	</div>
	<!-- end col -->
	
</div>
<!-- end row -->

<!--
	The ID "widget-grid" will start to initialize all widgets below 
	You do not need to use widgets if you dont want to. Simply remove 
	the <section></section> and you can use wells or panels instead 
	-->

<!-- widget grid -->
<section id="widget-grid" class="">

	<!-- row -->

	<div class="row">

		<div class="col-sm-6 col-md-6 col-lg-6">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/1.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 hot">
									HOT
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$99</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
							<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
						<div class="product-info smart-form">
							<div class="row">
								<div class="col-md-6 col-sm-6 col-xs-6"> 
									<a href="javascript:void(0);" class="btn btn-success">Add to cart</a>
								</div>
								<div class="col-md-6 col-sm-6 col-xs-6">
									<div class="rating">
										<input type="radio" name="stars-rating" id="stars-rating-5">
										<label for="stars-rating-5"><i class="fa fa-star"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-4">
										<label for="stars-rating-4"><i class="fa fa-star"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-3">
										<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-2">
										<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-1">
										<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-6">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/2.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$109</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
								<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
						<div class="product-info smart-form">
							<div class="row">
								<div class="col-md-6 col-sm-6 col-xs-6"> <a href="javascript:void(0);" class="btn btn-success">Add to cart</a> </div>
								<div class="col-md-6 col-sm-6 col-xs-6">
									<div class="rating">

										<input type="radio" name="stars-rating" id="stars-rating-5">
										<label for="stars-rating-5"><i class="fa fa-star"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-4">
										<label for="stars-rating-4"><i class="fa fa-star"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-3">
										<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-2">
										<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
										<input type="radio" name="stars-rating" id="stars-rating-1">
										<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/3.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 hot">
									HOT
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$399</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
								<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>			

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/4.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$19</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
							<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/5.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$195</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
								<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/7.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$99</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
							<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/8.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$109</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
								<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>	

		<div class="col-sm-6 col-md-6 col-lg-4">
			<!-- product -->
			<div class="product-content product-wrap clearfix">
				<div class="row">
						<div class="col-md-5 col-sm-12 col-xs-12">
							<div class="product-image"> 
								<img src="img/demo/e-comm/9.png" alt="194x228" class="img-responsive"> 
								<span class="tag2 sale">
									Sale
								</span> 
							</div>
						</div>
						<div class="col-md-7 col-sm-12 col-xs-12">
						<div class="product-deatil">
								<h5 class="name">
									<a href="#">
										Product Name Title Here <span>Category</span>
									</a>
								</h5>
								<p class="price-container">
									<span>$399</span>
								</p>
								<span class="tag1"></span> 
						</div>
						<div class="description">
								<p>Proin in ullamcorper lorem. Maecenas eu ipsum</p>
						</div>
					</div>
				</div>
			</div>
			<!-- end product -->
		</div>
		
		<div class="col-sm-12 text-center">
			<a href="javascript:void(0);" class="btn btn-primary btn-lg">Load more <i class="fa fa-arrow-down"></i></a>
		</div>

	</div>

	<!-- end row -->

</section>
<!-- end widget grid -->

<script type="text/javascript">
	
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR you can load chain scripts by doing
	 * 
	 * loadScript(".../plugin.js", function(){
	 * 	 loadScript("../plugin.js", function(){
	 * 	   ...
	 *   })
	 * });
	 */
	
	// pagefunction
	
	var pagefunction = function() {
		// clears the variable if left blank
	};
	
	// end pagefunction

	// destroy generated instances 
	// pagedestroy is called automatically before loading a new page
	// only usable in AJAX version!

	var pagedestroy = function(){
		
		/*
		Example below:

		$("#calednar").fullCalendar( 'destroy' );
		if (debugState){
			root.console.log("✔ Calendar destroyed");
		} 

		For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic

		*/
	}

	// end destroy
	
	// run pagefunction
	pagefunction();
	
</script>
